<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>活动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="./assets/i/favicon.png" />
    <link rel="stylesheet" href="./assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="./assets/css/basic.css" />
    <link rel="stylesheet" href="./assets/css/app.css" />
    <style>
        html,body{height:100%;}
        #overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.65;filter:alpha(opacity=65);z-index:999;display: none;}
        #win{position:absolute; width: 100%; height: 100%; z-index:1001;display: none;}

        section.fig-btn{width:100%;padding:1em 4em 0;background-color:#fff}
        section.fig-btn button.btn{width:100%;-moz-border-radius:5px;-wekbit-border-radius:5px;border-radius:5px}
        section.fig-btn button.am-btn-block{margin-bottom:15px}

        .am-btn-warning{ background-color: #ff6634; border-color: #ef5e2e; }

        .out{ display: none; }

        @media all and (max-height: 480px) {
            .kuai-fig section{ padding-top: 3em; }
        }

        @media all and (min-height: 481px) and (max-height: 667px){
            .kuai-fig section{ padding-top: 5em; }
        }

        @media all and (min-height: 668px) and (max-height: 736px){
            .kuai-fig section{ padding-top: 8em; }
        }

        .kuai-fig figure.bottom{ padding-top: 0; }
        .kuai-fig figure.bottom figcaption{ color: #ff6634; text-decoration: underline; }

        .kuai-fig figure.am-figure-default img{ padding-bottom: 30px; padding-top: 10px; }
        section.fig-btn{ padding: 0 1em; }
        .kuai-fig section figcaption h3{ font-size: 2.0rem; color: #333333; margin-bottom: 0; }
        .kuai-fig figure figcaption{ color: #666666; font-size: 1.2rem; }

        .am-figure-default figcaption{ color: #666666; margin-bottom: 20px; }

        .am-figure-default img{ max-width: 80%; border: none; }
        section.am-figure-default p{ text-align: center; margin: 0 0 5px; color: #333333; }
        section.am-figure-default p span{ color: #ff6634; }

        section.am-figure-default{ position: relative; }
        p.money, p.money-8{ position: absolute; color: #492b05 !important; font-size: 5.0rem; padding-top: 32px; }
        p.money span, p.money-8 span{ font-size: 2.5rem; color: #492b05 !important; }

        @media all and (max-width: 320px) {
            p.money{ left: 62%; }
            p.money-8{ left: 66%; }
        }

        @media all and (min-width: 321px) and (max-width: 375px) {
            p.money{ left: 64%; top: 31%; }
            p.money-8{ left: 68%; top: 31%; }
        }

        @media all and (min-width: 376px) and (max-width: 480px) {
            p.money{ left: 64%; top: 42%;}
            p.money-8{ left: 68%; top: 42%; }
        }

        img{
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            max-width: 100%;
            height: auto;
            vertical-align: middle;
            border: 0;
        }
    </style>
</head>
<body style="background-color: #ffffff;">
<!-- 蒙版图层 -->
<div id="overlay">
</div>
<div id="win">
    <img class="okKonw" src="./assets/i/mo.png" alt=""/>
</div>

<!-- 68元，体验券 -->
<section class="kuai-fig out">
    <section class="am am-figure am-figure-default ">
        <p class="money"><span>¥</span>68</p>
        <img class="tyq" src="./assets/i/tyq1.png" data-rel="../../assets/i/tyq1.png" alt="体验券" />
        <p>恭喜您获得<span>68元</span>洗车体验券！</p>
        <figcaption class="am-figure-capition-btm">精洗费时价高不够亮，快快省时价低还打蜡</figcaption>
    </section>

    <section class="fig-btn">
        <button type="submit" class="btn am-btn am-btn-warning am-btn-lg am-btn-block">关注公众号参加新活动</button>
    </section>

    <figure class="am am-figure am-figure-default bottom">
        <figcaption class="am-figure-capition-btm">体验券可在快快车生活微信公众号中下单使用</figcaption>
    </figure>
</section>

<!-- 8元，代金券 -->
<section class="kuai-fig">
    <section class="am am-figure am-figure-default ">
        <p class="money-8"><span>¥</span>8</p>
        <img class="tyq" src="./assets/i/tyq2.png" data-rel="../../assets/i/tyq2.png" alt="代金券" />
        <p>恭喜您获得<span>8元</span>洗车代金券！</p>
        <figcaption class="am-figure-capition-btm">精洗费时价高不够亮，快快省时价低还打蜡</figcaption>
    </section>

    <section class="fig-btn">
        <button type="submit" class="btn am-btn am-btn-warning am-btn-lg am-btn-block">关注公众号参加新活动</button>
    </section>

    <figure class="am am-figure am-figure-default bottom">
        <figcaption class="am-figure-capition-btm">体验券可在快快车生活微信公众号中下单使用</figcaption>
    </figure>
</section>

<!-- 10元，代金券 -->
<section class="kuai-fig out">
    <section class="am am-figure am-figure-default ">
        <p class="money"><span>¥</span>10</p>
        <img class="tyq" src="./assets/i/tyq2.png" data-rel="../../assets/i/tyq2.png" alt="代金券" />
        <p>恭喜您获得<span>10元</span>洗车代金券！</p>
        <figcaption class="am-figure-capition-btm">精洗费时价高不够亮，快快省时价低还打蜡</figcaption>
    </section>

    <section class="fig-btn">
        <button type="submit" class="btn am-btn am-btn-warning am-btn-lg am-btn-block">关注公众号参加新活动</button>
    </section>

    <figure class="am am-figure am-figure-default bottom">
        <figcaption class="am-figure-capition-btm">体验券可在快快车生活微信公众号中下单使用</figcaption>
    </figure>
</section>

<!-- 陛下，活动已经结束了 显示页面 -->
<section id="cry" class="kuai-fig out">
    <section class="am am-figure am-figure-default ">
        <figcaption class="am-figure-capition-btm"><h3>陛下，活动已经结束了！</h3></figcaption>
        <img src="./assets/i/cry.png" data-rel="../../assets/i/cry.png" alt="" style="max-width:50%;" />
        <figcaption class="am-figure-capition-btm">精洗费时价高不够亮，快快省时价低还打蜡</figcaption>
    </section>

    <section class="fig-btn">
        <button type="submit" class="btn am-btn am-btn-warning am-btn-lg am-btn-block">关注公众号参加新活动</button>
    </section>

    <figure class="am am-figure am-figure-default bottom">
        <figcaption class="am-figure-capition-btm">欢迎关注快快车生活，关注最新活动！</figcaption>
    </figure>
</section>
<script src="assets/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('button.am-btn').on('click', function() {
            $('#overlay').css('display', 'block');
            $('#win').css('display', 'block');
        });

        $('.okKonw').on('click', function() {
            $('#overlay').css('display', 'none');
            $('#win').css('display', 'none');
        });
    });

    /**
     * 判断是Android还是ios系统
     * */
    var u = navigator.userAgent, app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

    function hengshuping(){
        if(window.orientation==180||window.orientation==0){
            alert("竖屏状态！");
        }
        if(window.orientation==90||window.orientation==-90){
            alert("横屏状态！");
        }
    }
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

</script>
</body>
</html>